<template>
	<view class="wx-Logo login">
		<u-popup :show="isVisible" mode="center" height="800px" :custom-style="{
			width: '90%',
			borderRadius: '30rpx',
			backgroundColor: '#fff'
		}">
			<view class="container">
				<!-- 标题 -->
				<view class="title">
					<text>{{phonelogin?'微信登录':'手机登录'}}</text>
					<!-- <text class="myColor">需要您上传头像和填写昵称</text> -->
				</view>
				<view class="" v-if="phonelogin">
					<!-- 选择头像 -->
					<view class="choose-avatar-row" style="margin-bottom: 20rpx;padding-bottom: 20rpx;">
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="showUrl"></image>
						</button>
						<!-- 	<text class="myColor">点击左侧选择头像</text> -->
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
							style="color: #807E7E;border: none;font-size: 24rpx;text-align: left;background-color: #fff;width: auto;">
							<text class="u-button__text">点击获得头像</text>
						</button>
						<!-- <u-button type="primary"
							customStyle="background-color: #fff;color:#807E7E;border:none; justify-content: left;"
							:plain="true" text="点击左侧选择头像" open-type="chooseAvatar" @chooseavatar="onChooseAvatar1">
						</u-button> -->
					</view>
					<!-- 选择昵称 -->
					<view class="choose-nickname-row">
						<text>昵称</text>
						<input v-model="nickName" @blur="inputName" type="nickname" placeholder="请输入昵称"
							style="color: #000;" class='codeinput' />
					</view>
					<view class="choose-nickname-row">
						<text>用户姓名</text>
						<input v-model="realname" @blur="inputUser" type="text" placeholder="请输入用户姓名"
							style="color: #000;margin-bottom: 30rpx;" class='codeinput' />
					</view>
					<view class="choose-nickname-row">
						<text>电话</text>
						<input v-model="mobile" cursor-spacing="85rpx" :always-embed="true" @blur="inputMobile" type="text" placeholder="请输入电话"
							style="color: #000;margin-bottom: 30rpx;" class='codeinput' />
					</view>
					<view class="choose-position-row"  @click="changePosition">
						<text>公司职位</text>
						<view class="item">
							<vvSelect style="padding: 10px 0px;position: relative;z-index: 1000000;" placeholder="请选择岗位" class="select" :list="positions" label="name" valueKey="id"
								ref="vvSelect1" :fontSize="'13px'" :name="jobName" @change="pickerChange"></vvSelect>
							<view class="arrow" :style="{zIndex: job_id ? 1000001 : 10}">
								<u-icon name="arrow-down" color="#505050;" v-if="job_id==''" size="16">
								</u-icon>
								<u-icon name="close-circle" color="#505050;" v-if="job_id" size="16" @click="closeSel1">
								</u-icon>
							</view>
						</view>
					</view>
					<!-- <view class="choose-nickname-row">
						<text>同意项目隐私协议</text>
						<input v-model="username" @blur="inputUser" type="text" placeholder="请输入用户姓名"
							style="color: #000;" class='codeinput' />
					</view> -->
				</view>
				<view class='form' v-if='codelogin'>
					<input type="number" v-model="phone" class='input' placeholder="请输入手机号"
						placeholder-class="placeholder">
				</view>
				<view class='form' v-if='codelogin'>
					<input type="digit" controlled="true" v-model="code" class='codeinput' :password="show"
						placeholder="请输入验证码" placeholder-class="placeholder">
					<view :class="disabled ? 'huoquzhong' : 'huoqu'" @click="get_code">{{ time }}{{ text }}</view>
				</view>
				<view class="chonseLogin">
					<!-- <view class='desc' @click='changeway(phonelogin)' v-if='phonelogin'>切换验证码登录?</view> -->
					<!-- <u-button class='desc' text="验证码登录" color="linear-gradient(to right, #99DBF2,#157DFA)" size="mini" v-if='phonelogin'></u-button> -->
					<view class='desc' @click='changeway(phonelogin)' v-if='!phonelogin'>微信授权登录?</view>
				</view>
				<view class="other-list">
					<view class="left">
						<radio-group activeColor="#157DFA">
							<label v-for="(item, index) in List" :key="index">
								<radio :class="active == index ? 'checked' : ''" style="transform: scale(0.6)" :checked="active== index" :value="index"
									@click="radioChange1(index)" activeColor="#157DFA" />
							</label>
						</radio-group>
					</view>
					<view class="right">
						同意<text style="color: #47578E;" @click="goPro">《项目隐私协议》</text>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="login-row">
					<button @click="close">关闭</button>
					<button :class="{'inactive' : loginDisabled}" @click="login()">登录</button>
				</view>
			</view>
			<web-view v-if="isShow" :src="webUrl"></web-view>
		</u-popup>
	</view>
</template>

<script>
	import vvSelect from '@/components/vv-select/vv-select.vue'
	import {
		mapMutations
	} from 'vuex'
	import {
		wxLogin,
		searchList,
		mobilelogin,
		empower,
		jobList
	} from '@/request/api.js'
	export default {
		name: "wx-login-popup",
		components: {
			vvSelect,
		},
		computed: {
			jobName(){
				return this.positions.filter(item => item.id == this.job_id)[0] ? this.positions.filter(item => item.id == this.job_id)[0].name : ''
			}
		},
		data() {
			return {
				isShow:false,
				webUrl:'',
				positions: [],
				realname:'',
				job_id: '',
				showUrl: '/static/my/tx.png', //                  默认头像
				avatarUrl: '', //
				nickName: '',
				mobile:'',
				// 控制登录按钮是否可用
				loginDisabled: false,
				phonelogin: true,
				codelogin: false,
				show: true,
				isCheck: '1',
				isCheckEd: false,
				disabled: false,
				phone: '',
				password: '',
				code: '',
				showPosition: false,
				rules: {
					password: {
						rule: /^[0-9a-zA-Z]{1,16}$/,
						msg: "密码应该为1-16位"
					},
					phone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					code: {
						rule: /^[0-9]{4}$/,
						msg: "请输入4位数字验证码"
					}
				},
				ltype: '',
				text: '获取验证码',
				time: '',
				hasshowfirst: '',
				loginWX: {
					mobile: '',
					nickName: '',
					avatarUrl: ''
				},
				loginPhone: {
					mobile: '',
					code: ''
				},
				List: [{
					name: '协议'
				}],
				active:''
			};
		},
		props: {
			isVisible: {
				type: Boolean,
				default: false
			},
			// mobile: {
			// 	type: String,
			// 	default: ''
			// },
			openid: {
				type: String,
				default: ''
			},

		},
		watch: {
			// 只要昵称填写了就可以提交登录
			nickName(newVal) {
				if (newVal) {
					this.loginDisabled = false
				}
			}
		},
		onShow() {

		},
		created() {
			let url = getApp().globalData.baseUrl
			url  = url.replace(/api/,'')
			this.webUrl = url +'/loading/bindWechat.html',
			console.log(this.avatarUrl,this.nickName,this.job_id,this.realname,'1')
			this.getJobList()
			
		},
		methods: {
			...mapMutations(['searchList']),
			closeSel1() {
				this.job_id = ''
				this.$refs.vvSelect1.emptCheckLabels()
			},
			radioChange1(index) {
				if (this.active == index) { // 如果已经选中，则取消选中
					this.active = null;
				} else { // 否则进行选中赋值
					this.active = index;
				}
			},
			goPro() {
				uni.navigateTo({
					url: `/pages/index/noticeList/details?type=pro`
				})
			},
			pickerChange(val) {
				this.job_id = val
			},
			// 获取职位
			getJobList(e) {
				jobList().then(res => {
					this.positions = res.data.map(item => {
						return {
							...item,
							name: item.job_name,
						}
					})
				})
			},
			async getSearchList() {
				let res = await searchList()
				this.searchList(res.data)
				let setData = this.$store.state.searchList
				// console.log(res, setData)
			},
			changePosition() {
				console.log('我点饿了');
				this.showPosition = true;
				console.log(this.showPosition,'this.showPosition')
				this.getJobList()
				
			},
			//选择登录方式
			changeway(r) {
				if (r) {
					this.phonelogin = false;
					this.codelogin = true;
				} else {
					this.phonelogin = true;
					this.codelogin = false;
				}
			},
			//验证
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'none'
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			//获取验证码
			async get_code() {
				if (this.disabled) {
					return;
				}
				// this.setInterValFunc();//开启倒计时
				// return
				if (!this.validate('phone')) return;
				uni.showLoading({
					title: '发送中',
					mask: true
				});
				uni.request({
					url: `${getApp().globalData.baseUrl}/sms/send`,
					data: {
						mobile: this.phone,
						event: 'login'
					},
					method: 'post', //get、post、delete
					success: re => {
						setTimeout(function() {
							uni.hideLoading();
						}, 100);
						// console.log(re)
						if (re.data.code == 1) {
							this.disabled = true;
							this.setInterValFunc(); //开启倒计时
						} else {
							uni.showToast({
								title: re.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			//倒计时
			setInterValFunc(e) {
				this.time = e || 60;
				this.text = '秒';
				this.setTime = setInterval(() => {
					if (this.time - 1 <= 0) {
						this.time = '';
						this.text = '重新获取';
						if (e) {
							this.text = '获取验证码';
						}
						this.code = '';
						this.disabled = false;
						clearInterval(this.setTime);
						if (uni.getStorageSync('userInfo')) {
							this.text = '获取验证码';
						}
					} else {
						this.time--;
					}
				}, 1000);
			},
			//跳转
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			//登录
			login() {
				console.log(this.mobile,'login')
				// return
				if (this.phonelogin) {
					if (this.avatarUrl == '') {
						uni.showToast({
							title: '请上传头像',
							icon: 'none'
						});
						return false;
					}
					if (this.nickName == '') {
						uni.showToast({
							title: '请填写昵称',
							icon: 'none'
						});
						return false;
					}
					if (this.job_id == '') {
						uni.showToast({
							title: '请选择公司职位',
							icon: 'none'
						});
						return false;
					}
					if (this.realname == '') {
						uni.showToast({
							title: '请输入用户姓名',
							icon: 'none'
						});
						return false;
					}
					wx.login({
						provider: 'weixin',
						success: loginRes => {
							wxLogin({
								code: loginRes.code,
								avatar: this.avatarUrl,
								nickname: this.nickName,
								mobile: this.mobile,
								openid: this.openid,
								job_id: this.job_id,
								realname: this.realname,
							}).then(r => {
								console.log(r,'gg')
								// this.avatarUrl = ''
								// this.nickName = ''
								// this.job_id = ''
								uni.showToast({
									title: '登录成功',
									duration: 1500
								})
								if(r.data.is_bind_wechat_openid == 0){
									this.isShow = true
								}
								uni.setStorageSync('userInfo', r.data)
								this.show = false;
								uni.setStorageSync('token', r.data.token)
								this.getSearchList()
								// console.log(r)
								this.$emit('update')
								uni.$emit('hasLogin', true)
							})
						}
					})
				} else {
					//手机号验证码登录
					if (!this.validate("code")) return;
					uni.showLoading({
						title: '登录中',
						mask: true
					});
					uni.request({
						url: `${getApp().globalData.baseUrl}/user/mobilelogin`,
						data: {
							mobile: this.phone,
							captcha: this.code
						},
						method: 'post', //get、post、delete
						success: re => {
							uni.hideLoading();
							// console.log(re)
							if (re.data.code == 1) {
								if(re.data.is_bind_wechat_openid == 0){
									this.isShow = true
								}
								uni.showToast({
									title: '登录成功',
									duration: 1500
								})
								this.getSearchList()
								uni.setStorageSync('userInfo', re.data.data)
								this.show = false;
								uni.setStorageSync('token', re.data.data.token)
								// console.log(r)
								this.$emit('update')
								this.text = '获取验证码';
								this.setInterValFunc(1)
								this.code = '';
								this.disabled = false;
								uni.$emit('hasLogin', true)
							} else {
								uni.showToast({
									title: re.data.msg,
									icon: 'none'
								});
							}
						}
					})
				}

			},
			onChooseAvatar1(e) {
				console.log(e)
			},
			// 选择头像事件
			async onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				// do something
				// 我这边是把文件上传到云服务器
				let getavatarUrl = await this.uploadFilePromise(avatarUrl)
				// console.log(getavatarUrl)
				this.avatarUrl = getavatarUrl.url
				this.showUrl = getavatarUrl.showUrl
			},
			// 上传头像图片到服务器
			uploadFilePromise(url) {
				// console.log(url)
				return new Promise((resolve, reject) => {
					const token = uni.getStorageSync('token')
					let a = uni.uploadFile({
						url: `${getApp().globalData.baseUrl}/common/userUpload`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							token
						},
						success: (res) => {
							// console.log(res)
							setTimeout(() => {
								resolve({
									url: JSON.parse(res.data).data.url,
									showUrl: JSON.parse(res.data).data.fullurl
								})
							}, 1000)
						},
						fail(fails) {
							console.log(fails)
						}
					});
				})
			},
			// 昵称输入事件
			inputName(e) {
				const {
					value
				} = e.detail
				this.nickName = value
				console.log(this.nickName)
				// do something
			},
			// 姓名输入
			inputUser(e) {
				const {
					value
				} = e.detail
				this.realname = value
			},
			inputMobile(e) {
				const {
					value
				} = e.detail
				this.mobile = value
				console.log(this.mobile, 'this.mobile')
				// do something
			},
			// 关闭按钮点击事件
			close() {
				this.$emit('update', false)
			},
			// 登录成功后执行
			submit() {
				const userInfo = {
					avatarUrl: this.avatarUrl,
					nickName: this.nickName
				}
				this.$emit('submit', userInfo)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep button::after {
		border: none !important;
	}
	::v-deep button::after {
		border: none !important;
	}
	.select{
		flex: 1;
	}
	
	::v-deep .vv-input__placeholder{
		font-size: 26rpx !important; 
	}
	.choose-position-row {
		display: flex;
		flex-direction: column;
		width: 97%;
		// padding: 10px 0px;
		
		// .codeinput{
		// 		margin-left: 20rpx;
		// 	}
		text{
			width: 100%;
			text-align: left;
			color: #081738;
			font-size: 24rpx;
		}
		.item {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			width: 100%;
			// padding: 10px 0px;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			border: 1px solid red;
			box-sizing: content-box;
			font-size: 24rpx;
			padding-left: 14rpx;
			border: 1px solid #eaeaea;
			border-radius: 10rpx;
			position: relative;
			.arrow {
				margin-left: 15rpx;
				margin-right: 10rpx;
				position: absolute;
				right: 10rpx;
				top: 15rpx;
			}
		}
	}
	.other-list {
		display: flex;
		align-items: center;
		color: #505050;
		font-size: 24rpx;
		line-height: 20rpx;
		height: 20rpx;
		.right {
			display: flex;
			align-items: center;
			width: 80%;
			.myAddress {
				display: flex;
				flex-direction: column;
				width: 100%;
				.cityAddres {
					display: flex;
					.top {
						flex: 1;
					}
					.city {
						width: 48px;
						display: flex;
					}
				}
			}
		}
	}

	// view {
	// 	box-sizing: border-box;
	// }

	.u-popup__content .data-v-3a231fda {
		top: 93px;
		bottom: 20px;
		width: 90%;
		height: 321px;
		border-radius: 20px !important;
		margin-bottom: 80rpx;
	}

	.form {
		width: 100%;
		height: 100rpx;
		background-color: #F2F2F2;
		/* margin-top:40rpx; */
		/* border-radius: 40rpx; */
		border-bottom: 1px solid #F2F2F2;
	}

	.wx-Logo {
		width: 80%;
		margin-bottom: 40px;
	}

	.myColor {
		color: #807E7E;
	}

	.desc {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #807E7E;
		font-size: 24rpx;
		text-align: center;
		margin: 50rpx 0;
	}

	.container {
		// width: 40%;
		// height: 45%;
		// position: absolute;
		// left: 0;
		// bottom: 0;
		padding: 0 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.title {
			width: 100%;
			height: 30%;
			font-size: 28rpx;
			font-weight: bold;
			padding-top: 30rpx;
			color: #081738;
			margin-bottom: 20rpx;

			text:nth-child(2) {
				display: block;
				font-size: 24rpx;
				font-weight: normal;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
		}

		// .choose-nickname-row 
		.choose-avatar-row {
			width: 100%;
			// height: 14%;
			    margin-top: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			// padding: 10px 0px;
			font-size: 24rpx;
			border-bottom: 1px solid #e3e3e3;

			.avatar-wrapper {
				width: 40px;
				height: 40px;
				margin: 0;
				padding: 0;
				margin-right: 33rpx;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}
		}

		.choose-nickname-row {
			border-top: none;
			width: 100%;
			// height: 14%;
			// padding: 10px 0px;
			font-size: 24rpx;
			margin-bottom: 10rpx;

			text {
				width: 100%;
				text-align: left;
				color: #081738;
			}
			// .codeinput{
			// 	margin-left: 20rpx;
			// }
		}

		.login-row {
			width: 90%;
			height: 30%;
			padding-top: 0px;
			display: flex;
			margin-bottom: 40rpx;
			margin-top: 50rpx;
			margin-left: 100rpx;

			button {
				font-size: 24rpx;
				width: 36%;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-color: transparent;
				color: #979797;
				background: #FFFFFF;
				border: 0.5px solid #eaeaea;
			}

			button:last-of-type {
				font-size: 24rpx;
				width: 36%;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-color: transparent;
				color: #fff;
				background: #47578E;
			}

			.inactive {
				color: #ccc;
			}
		}
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		background: #FFFFFF;
	}

	.login {
		width: 90%;
		margin: 0 auto;
		// color:#FFFFFF;
	}

	.login .logo {
		margin-top: 100rpx;
		width: 100%;
		height: 300rpx;
		text-align: center;
	}

	.login .logo image {
		width: 200rpx;
		height: 200rpx;
	}

	.login .info {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.login .form {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		/* margin-top:40rpx; */
		/* border-radius: 40rpx; */
		border-bottom: 1px solid #eaeaea;
	}

	.login .form .left {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		float: left;
		color: #807E7E;
		text-align: center;
	}

	.login .form .next {
		float: left;
		width: 8px;
		height: 8px;
		border-top: 2px solid #807E7E;
		border-right: 2px solid #807E7E;
		transform: rotate(135deg);
		margin-top: 35rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.login .form .right {
		height: 100rpx;
		float: left;
	}

	.login .form .right .logininput {
		width: 90%;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #000000;
		font-size: 26rpx;
	}

	.login .form .input {
		width: 75%;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #000000;
		float: left;
		margin-left: 5%;
		font-size: 26rpx;
	}

	.placeholder {
		font-size: 26rpx;
		color: #807E7E;
		line-height: 60rpx;
	}

	.login .forget {
		text-align: right;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		color: #000;
	}

	.login .info1 {
		color: #807E7E;
		font-size: 24rpx;
		text-align: left;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.login .codeinput {
		width: 97%;
		height: 66rpx;
		line-height: 66rpx;
		color: #000000;
		margin: 20rpx 0;
		font-size: 24rpx;
		padding-left: 14rpx;
		border: 1px solid #eaeaea;
		border-radius: 10rpx;
	}

	.login .form .codeinput {
		width: 60%;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #eaeaea;
		float: left;
		margin-left: 5%;
		font-size: 26rpx;
		border: 1px solid #000;
	}

	.login .form .huoqu {
		width: 30%;
		height: 100rpx;
		line-height: 100rpx;
		float: right;
		font-size: 26rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0066FF;
	}

	.login .form .huoquzhong {
		width: 30%;
		height: 100rpx;
		line-height: 100rpx;
		float: right;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: center;
		color: #999999;
	}

	.btn {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		font-size: 26rpx;
	}

	.chonseLogin {
		z-index: 1;
	}

	.btn .button {
		background-color: #ECECEC;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		// color:#ffffff;
		letter-spacing: 10rpx;
	}

	.btn .desc {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #807E7E;
	}

	.btn .isCheckEd {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		// color:#ffffff;
		letter-spacing: 10rpx;
		background-color: #0066ff;
	}

	.footer {
		width: 90%;
		height: 140rpx;
		margin: 0 auto;
		margin-top: 100rpx;

	}

	.footer .desc {
		width: 100%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 80rpx;
		color: #807E7E;
		text-align: center;
		font-size: 26rpx;
	}
</style>